<template>
  <div class="project-todo-page">
    <div class="page-container">
      <div class="table-header" header="待办事项"></div>
      <div class="table-list" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :min-width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div
                v-if="item.key == 'completeStatus'"
                :class="[checkStatusClass(row), 'status-text']"
              >
                {{ checkStatusName(row) }}
              </div>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="220"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button
                  type="link"
                  @click="gotoView(row, 1)"
                  v-if="row.completeStatus == 0"
                >
                  接单
                </a-button>
                <a-button
                  type="link"
                  @click="gotoView(row, 2)"
                  v-if="row.completeStatus == 0"
                >
                  退回
                </a-button>
                <a-button
                  type="link"
                  @click="gotoView(row, 3)"
                  v-if="row.completeStatus == 2"
                >
                  生产加工
                </a-button>
                <a-button
                  type="link"
                  @click="gotoView(row, 4)"
                  v-if="row.completeStatus == 3"
                >
                  钢筋质检
                </a-button>
                <a-button
                  type="link"
                  @click="gotoView(row, 5)"
                  v-if="row.completeStatus == 4"
                >
                  生产完成
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div>
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <viewPage
      :visible.sync="pageVisible"
      :type="operateType"
      :row="row"
    ></viewPage>
  </div>
</template>

<script>
import { getGJJGList } from "@/api/todo";
import { getLoginData } from "@/tools";
import viewPage from "./components/view.vue";
export default {
  components: {
    viewPage,
  },
  props: ["isMenuCode"],
  inject: ["upLeave"],
  watch: {
    isMenuCode: {
      handler(val) {
        if (val == "GJJG") {
          this.getData();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      operateType: 1,
      pageVisible: false,
      row: {},
      loading: false,
      columns: [
        {
          title: "梁号",
          key: "componentParts",
        },
        {
          title: "桥梁名称",
          key: "bridgeName",
        },
        {
          title: "幅别",
          key: "amClass",
        },
        {
          title: "跨",
          key: "span",
        },
        {
          title: "梁类型",
          key: "beamTypeDesc",
        },
        {
          title: "下单人员",
          key: "createrName",
        },
        {
          title: "下单时间",
          key: "createTime",
        },
        {
          title: "状态",
          key: "completeStatus",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    getData() {
      this.upLeave.getTodoData();
      this.pager.page = 1;
      this.getTableData();
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { userId } = getLoginData();
      return new Promise((resolve, reject) => {
        getGJJGList({
          page,
          pageSize,
          pushType: "REBAR_PROCESS",
          recipientUserid: userId,
        })
          .then((res) => {
            let { data } = res;
            this.tableData = data.result?.rows || [];
            this.pager.total = data?.result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //处理
    gotoView(row, type) {
      this.row = row;
      this.operateType = type;
      this.pageVisible = true;
    },

    //校验状态className
    checkStatusClass(row) {
      let { completeStatus } = row;
      switch (completeStatus) {
        case 0:
          return "pending";

        case 1:
          return "error";

        case 2:
          return "warn";

        case 3:
          return "produce";

        case 4:
          return "normal";

        // case 5:
        //   return "normal";

        default:
          return "cancel";
      }
    },

    //校验状态名称
    checkStatusName(row) {
      let { completeStatus } = row;
      switch (completeStatus) {
        case 0:
          return "待接单";

        case 1:
          return "已退回";

        case 2:
          return "待生产";

        case 3:
          return "待质检";

        case 4:
          return "已完成";

        // case 5:
        //   return "已完成";

        default:
          return "-";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.project-todo-page {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .page-container {
    margin-top: 10px;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .table-header {
      padding: 20px 20px;
      box-sizing: border-box;
      .flex();
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .table-list {
      flex: 1;
      height: 100%;
      .status-text {
        border-radius: 4px;
        color: #fff;
        .flex();
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        font-size: 12px;
        width: 80px;
        &.pending {
          background: #0098ff;
        }
        &.warn {
          background: #ff993f;
        }
        &.produce {
          background: #f33ecb;
        }
        &.approv {
          background: #ff7113;
        }
        &.error {
          background: #ff3f4a;
        }
        &.normal {
          background: #4bc964;
        }
        &.cancel {
          background: #f1f2f7;
          color: #aab0bc;
        }
      }
    }
  }
}
</style>
